<template>
  <div style="display: flex; justify-content: space-between; flex-direction: column; height: 100%;">
    <div style="overflow: auto; height: 100%;">
      <router-view></router-view>
    </div>
    <div class="footer">
      <div :class="t.active ? 'f-active' : ''" v-for="(t, i) in tabs" :key="t" @click="redirectTo(i)">
        <span v-html="t.svg"></span><span>{{t.tab}}</span>
      </div>
    </div>
  </div>
</template>
<script type="javascript">

import {reactive} from "vue";

window.flyIn = function (content) {
  let height = content.offsetHeight
  //500毫秒播放完成
  let speed = height / (100 * 0.5);
  let id = window.setInterval(() => {
    content.style = 'transform: translateY(' + height + 'px);'
    height -= speed
    if (height <= 0) {
      window.clearInterval(id)
      content.style = ''
      setTimeout(() => {
        window.flyOut(content)
      }, 5000)
    }
  }, 10)
}

window.flyOut = function (content) {
  let height = content.offsetHeight
  let offset = 0
  let speed = height / (100 * 0.5);
  let id = window.setInterval(() => {
    content.style = 'transform: translateY(' + offset + 'px);'
    offset += speed
    if (offset >= height) {
      window.clearInterval(id)
      content.remove()
    }
  }, 10)
}

window.openMsg = function (msg, succOrNot) {
  let content = document.body
  let div = document.createElement('div')
  div.classList.add('msg-content')
  div.classList.add(succOrNot ? 'msg-succ' : 'msg-err')
  div.style = 'visibility: hidden;';
  let textNode = document.createTextNode(msg)
  div.appendChild(textNode)
  content.appendChild(div)
  window.flyIn(div)
}

export default {
  name: 'IndexRouter',
  components: {},
  data() {
    return {
      tabs:reactive([
        {tab: '闹铃设置', path: '/', svg:'<svg t="1651064810627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4760" width="25" height="25"><path d="M506.838955 950.072267c-224.547149 0-407.230841-182.681646-407.230841-407.212422 0-224.532823 182.683692-407.216515 407.230841-407.216515 224.534869 0 407.218562 182.683692 407.218562 407.216515C914.057517 767.389598 731.373825 950.072267 506.838955 950.072267zM506.838955 190.254112c-194.428178 0-352.62006 158.177556-352.62006 352.605733 0 194.424084 158.191882 352.602663 352.62006 352.602663 194.430224 0 352.60778-158.178579 352.60778-352.602663C859.446735 348.431667 701.269179 190.254112 506.838955 190.254112z" p-id="4761"></path><path d="M362.313328 811.974026c-2.279926 0-4.599761-0.559748-6.719028-1.76111C259.452635 755.683998 199.735555 653.229558 199.735555 542.859845c0-7.544837 6.106068-13.650905 13.652951-13.650905 7.54586 0 13.651928 6.106068 13.651928 13.650905 0 100.556207 54.42454 193.890942 142.019551 243.594971 6.559393 3.705392 8.865925 12.051477 5.146207 18.611893C371.686812 809.493531 367.073748 811.974026 362.313328 811.974026z" p-id="4762"></path><path d="M480.094848 848.771093c-0.413416 0-0.813528-0.025583-1.240247-0.052189-5.906523-0.533143-11.746532-1.226944-17.532305-2.106987-7.466042-1.121544-12.598946-8.054443-11.492752-15.519462 1.119497-7.440459 8.052396-12.505825 15.519462-11.491729 5.28026 0.799202 10.586103 1.438769 15.959483 1.918699 7.505951 0.667196 13.038968 7.30743 12.372795 14.82566C493.040694 843.438645 487.080959 848.771093 480.094848 848.771093z" p-id="4763"></path><path d="M172.683433 359.111914c-5.039783 0-10.146081-1.38658-14.705933-4.306072-45.358047-29.064966-72.436776-78.541821-72.436776-132.380006 0-86.648452 70.502727-157.137877 157.152203-157.137877 63.302745 0 120.126938 37.664831 144.778384 95.941096 5.879917 13.892405-0.613984 29.918403-14.506389 35.785018-13.932314 5.866614-29.918403-0.626263-35.785018-14.505365-16.092513-38.038338-53.184293-62.609966-94.488001-62.609966-56.543807 0-102.541421 45.997614-102.541421 102.527095 0 35.132148 17.678638 67.423599 47.291073 86.382393 12.692067 8.133238 16.398482 25.024953 8.266267 37.731346C190.496124 354.671789 181.683411 359.111914 172.683433 359.111914z" p-id="4764"></path><path d="M851.314521 359.111914c-8.999978 0-17.811668-4.440126-23.025413-12.573363-8.133238-12.706393-4.425799-29.598108 8.266267-37.731346 29.612435-18.958794 47.291073-51.250244 47.291073-86.382393 0-56.530504-45.997614-102.527095-102.541421-102.527095-41.304731 0-78.395488 24.571628-94.488001 62.609966-5.866614 13.879102-21.87931 20.385283-35.785018 14.505365-13.892405-5.866614-20.386306-21.892613-14.506389-35.785018 24.65247-58.277288 81.47564-95.941096 144.778384-95.941096 86.648452 0 157.15118 70.489424 157.15118 157.137877 0 53.837162-27.078729 103.314017-72.435753 132.380006C861.460602 357.725334 856.355327 359.111914 851.314521 359.111914z" p-id="4765"></path><path d="M219.04125 958.712041c-5.773494 0-11.599176-1.840928-16.545838-5.626137-11.985986-9.146311-14.279215-26.291806-5.119601-38.264489l59.810201-78.262458c9.146311-12.000312 26.2652-14.320147 38.264489-5.120624 11.985986 9.146311 14.279215 26.291806 5.119601 38.264489l-59.810201 78.262458C235.387543 955.004603 227.267609 958.712041 219.04125 958.712041z" p-id="4766"></path><path d="M785.517979 958.712041c-8.225335 0-16.346293-3.707438-21.718651-10.746762l-59.810201-78.262458c-9.159614-11.971659-6.866385-29.118178 5.119601-38.264489 11.985986-9.199523 29.104875-6.879688 38.264489 5.120624l59.811224 78.262458c9.15859 11.971659 6.865361 29.118178-5.120624 38.264489C797.117155 956.871113 791.291472 958.712041 785.517979 958.712041z" p-id="4767"></path><path d="M584.328817 655.387711c-7.040347 0-14.066367-2.706645-19.413142-8.106632l-73.649394-78.634942c-5.066389-5.106298-3.77293-12.013615-3.77293-19.199271L487.493352 333.539492c0-15.07944 12.226462-27.304879 27.305903-27.304879s27.305903 12.225439 27.305903 27.304879l0 204.681706 65.768913 70.662363c10.586103 10.721179 8.439206 28.013007-2.279926 38.611389C600.260671 652.761907 591.261717 655.387711 584.328817 655.387711z" p-id="4768"></path></svg>'},
        {tab: '音乐管理', path: '/music', svg:'<svg t="1651064927683" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5755" width="25" height="25"><path d="M844.743872 64.641229l-483.775168 80.814584c-1.567705 0.25071-3.031033 0.710175-4.453429 1.254573l-17.475 0c-11.915377 0-21.38403 9.532097-21.38403 21.280676l0 553.029462c-18.875906-10.912537-40.825824-17.140379-64.216557-17.140379-70.927399 0-128.433114 57.359382-128.433114 128.139425S182.512289 960.15695 253.439688 960.15695c70.926376 0 128.433114-57.359382 128.433114-128.139425 0-5.184069-0.314155-10.285251-0.899486-15.259542 0.585331-1.964748 0.899486-4.013407 0.899486-6.187933l0-449.764564 449.513854-79.267345 0 311.298955c-18.875906-10.870582-40.825824-17.142425-64.216557-17.142425-70.927399 0-128.433114 57.401338-128.433114 128.183428 0 70.738088 57.505715 128.139425 128.433114 128.139425 70.926376 0 128.432091-57.401338 128.432091-128.139425 0-5.184069-0.313132-10.285251-0.898463-15.301498 0.585331-1.966795 0.898463-4.015454 0.898463-6.187933l0-597.97307c0-10.45205-7.587815-19.190061-17.579377-20.946055-3.491521-2.173502-7.881504-3.051499-12.710486-2.257413l-11.370978 1.922792-1.170662 0C849.927941 63.135946 847.21004 63.679321 844.743872 64.641229z" p-id="5756"></path></svg>'},
        {tab: '系统设置', path: '/setting', svg:'<svg t="1651289585090" class="icon" viewBox="0 0 1030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4119" width="25" height="25"><path d="M943.321212 577.163636c12.412121 18.618182 31.030303 31.030303 55.854546 37.236364 6.206061 0 12.412121 6.206061 12.412121 6.206061 6.206061 6.206061 18.618182 18.618182 18.618182 31.030303v24.824242c-6.206061 24.824242-12.412121 43.442424-24.824243 62.060606l-6.20606 12.412121c-6.206061 12.412121-12.412121 18.618182-24.824243 24.824243-6.206061 6.206061-18.618182 6.206061-24.824242 6.20606-6.206061 0-12.412121 0-18.618182-6.20606-18.618182-6.206061-37.236364-6.206061-55.854546-6.206061h6.206061-12.412121c-18.618182 0-31.030303 6.206061-43.442424 12.412121 0 0-12.412121 6.206061-24.824243 18.618182-12.412121 12.412121-24.824242 37.236364-24.824242 62.060606 0 18.618182 0 37.236364 12.412121 62.060606 6.206061 12.412121 6.206061 31.030303-6.206061 43.442425-12.412121 12.412121-24.824242 18.618182-37.236363 24.824242-6.206061 6.206061-37.236364 18.618182-68.266667 24.824242 37.236364-6.206061 12.412121 0-12.412121 0h-6.206061c-6.206061 0-12.412121 0-18.618182-6.20606-6.206061-6.206061-12.412121-12.412121-12.412121-24.824243v6.206061c-12.412121-31.030303-31.030303-55.854545-55.854545-68.266667 0-6.206061-24.824242-12.412121-49.648485-12.412121s-49.648485 6.206061-68.266667 24.824243c-24.824242 18.618182-43.442424 43.442424-49.648485 74.472727 0-6.206061-6.206061 0-12.412121 0 0 0-12.412121 6.206061-18.618182 6.20606-12.412121 0-18.618182 0-37.236363-6.20606-12.412121-6.206061-24.824242-6.206061-37.236364-12.412121l-37.236364-18.618182c-12.412121-6.206061-18.618182-12.412121-24.824242-24.824243-6.206061-6.206061-6.206061-12.412121-6.206061-18.618181 0-6.206061 0-18.618182 6.206061-31.030304 6.206061-6.206061 12.412121-24.824242 12.412121-49.648484s-12.412121-43.442424-31.030303-62.060606c-12.412121-12.412121-24.824242-18.618182-43.442424-24.824243h-24.824242-6.206061c-12.412121 0-31.030303 6.206061-49.648485 6.206061h-12.412121c-6.206061 0-12.412121 0-18.618182-6.206061-6.206061 0-12.412121-12.412121-24.824242-18.618182-18.618182-31.030303-31.030303-68.266667-37.236364-105.50303v-6.206061c0-18.618182 12.412121-24.824242 24.824242-31.030303 24.824242-6.206061 43.442424-24.824242 62.060606-43.442424 18.618182-6.206061 24.824242-31.030303 24.824243-55.854545s-6.206061-49.648485-24.824243-68.266667C62.060606 415.806061 31.030303 397.187879 0 390.981818c18.618182 6.206061 12.412121 0 12.412121-6.20606-6.206061-6.206061-6.206061-18.618182-6.20606-24.824243 0-6.206061 0-18.618182 6.20606-31.030303 6.206061-24.824242 18.618182-49.648485 31.030303-68.266667-12.412121 24.824242-6.206061 12.412121 0 6.206061 0-12.412121 6.206061-18.618182 12.412121-24.824242 6.206061 0 6.206061-6.206061 12.412122-6.206061s12.412121 0 18.618181 6.206061c24.824242 6.206061 49.648485 12.412121 74.472728 6.20606 24.824242 0 43.442424-12.412121 62.060606-31.030303 12.412121-12.412121 18.618182-24.824242 18.618182-43.442424 6.206061 0 6.206061-12.412121 6.20606-24.824242v-18.618182-18.618182c0-18.618182-6.206061-43.442424-12.412121-62.060606 6.206061 31.030303 0 18.618182 0 6.20606v0c12.412121-6.206061 18.618182-12.412121 31.030303-18.618181l37.236364-18.618182c12.412121-6.206061 24.824242-6.206061 37.236363-12.412121 12.412121-6.206061 24.824242-6.206061 31.030303-6.206061 12.412121 0 18.618182 0 24.824243 12.412121 6.206061 6.206061 12.412121 18.618182 12.412121 31.030303 6.206061 12.412121 18.618182 24.824242 37.236364 43.442424s37.236364 24.824242 62.060606 24.824243 49.648485-6.206061 68.266666-18.618182c24.824242-24.824242 37.236364-43.442424 43.442425-68.266667 0-6.206061 6.206061-12.412121 12.412121-18.618181 6.206061 0 12.412121-6.206061 18.618182-6.206061 12.412121 0 18.618182 0 31.030303 6.206061 12.412121 0 24.824242 6.206061 37.236363 12.412121 12.412121 6.206061 24.824242 12.412121 31.030303 18.618182 12.412121 6.206061 18.618182 18.618182 24.824243 24.824242 0 6.206061 6.206061 6.206061 6.20606 12.412121v6.206061c0 6.206061-6.206061 18.618182-6.20606 24.824242 0 6.206061-6.206061 24.824242-6.206061 37.236364v18.618182c6.206061 24.824242 12.412121 43.442424 31.030303 62.060606 18.618182 18.618182 37.236364 24.824242 62.060606 31.030303 24.824242 0 49.648485 0 68.266667-12.412121 6.206061 0 12.412121-6.206061 18.618182-6.206061h6.20606c6.206061 0 18.618182 6.206061 24.824243 12.412121 12.412121 12.412121 18.618182 24.824242 31.030303 43.442424 6.206061 18.618182 12.412121 43.442424 18.618182 62.060607 0 12.412121 0 24.824242-6.206061 31.030303-6.206061 6.206061-12.412121 12.412121-24.824242 18.618181-24.824242 6.206061-49.648485 31.030303-62.060606 55.854546-6.206061 6.206061-12.412121 24.824242-12.412122 49.648485-6.206061 24.824242 0 49.648485 18.618182 68.266666zM682.666667 341.333333c-43.442424-43.442424-105.50303-68.266667-167.563637-68.266666-31.030303 0-62.060606 6.206061-93.090909 18.618181-43.442424 18.618182-80.678788 49.648485-105.50303 86.884849-6.206061-6.206061-24.824242 37.236364-37.236364 80.678788 0-18.618182-6.206061 12.412121-6.20606 49.648485 0 31.030303 6.206061 62.060606 18.618181 93.090909 12.412121 31.030303 31.030303 55.854545 49.648485 74.472727 18.618182 24.824242 49.648485 37.236364 74.472728 49.648485 31.030303 12.412121 62.060606 18.618182 93.090909 18.618182s62.060606-6.206061 93.090909-18.618182c43.442424-18.618182 80.678788-49.648485 105.50303-86.884849-6.206061 12.412121 12.412121-12.412121 24.824243-43.442424 12.412121-31.030303 18.618182-62.060606 18.618181-93.090909s-6.206061-62.060606-18.618181-93.090909C713.69697 372.363636 682.666667 335.127273 645.430303 310.30303l37.236364 31.030303z" p-id="4120"></path></svg>'}
      ]),
      lastActiveIndex: 0
    }
  },
  mounted() {
    var href = window.location.href;
    href = href.substring(href.indexOf('#') + 1)
    for (let i = 0; i < this.tabs.length; i ++) {
      if (this.tabs[i].path === href) {
        this.tabs[i].active = true
        this.lastActiveIndex = i
        break
      }
    }
  },
  methods: {
    redirectTo(index) {
      console.log(this.$route)
      this.tabs[this.lastActiveIndex].active = false
      this.lastActiveIndex = index
      this.tabs[index].active = true
      this.$router.push(this.tabs[index].path)
    },
  }
}
</script>
<style lang="css">
body {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.footer {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: nowrap;
  border-top: 1px solid #CCC;
  background-color: #FFF;
}

.footer div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer a {
  text-decoration: none;
  color: #000;
  display: inline-block;
}

.f-active {
  background-color: #EEE;
}

.f-active a {
  color: #ffa41e !important;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

button {
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
  height: 100%;
  box-sizing: border-box;
  background-color: #FFF;
  border: 1px solid #CCC;
  outline: transparent;
  vertical-align: middle;
  transition: background .3s;
}

button:hover {
  background-color: #efefef;
}

button:active {
  box-shadow: 1px 1px 3px #444 inset;
}

#app {
  height: 100%;
}

.msg-content {
  pointer-events: none;
  color: #FFF;
  padding: .5rem;
  font-weight: bold;
  border-top: 1px solid #EEE;
  overflow: hidden;
  word-wrap: break-word;
  white-space: break-spaces;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  user-focus: false;
  user-select: none;
}

.msg-succ {
  background-color: rgba(0, 176, 30, 0.7);
}

.msg-err {
  background-color: rgba(176, 0, 0, 0.7);
}
</style>